<template>
	<view class="bf wrc mt20 c0 f26" :style="{ padding: ptype == 2 ? '12rpx 0 0rpx' : '' }">
		<view @click="go({ t: 1, url: '/yb_sj/order/ordersub/ddxq?id=' + co.id })">
			<view class="wr1 p20 f-x-bt">
				<view class="">
					<view class="oid f24">
						<text class="wei">#</text>
						<text class="wei f60 ml5 l-n mr15">{{ co.takeNo }}</text>
						<text v-if="co.appointment == 1" class="ydc cf bs10">预</text>
					</view>
					<view class="f24 c3 mt5">
						<text v-if="co.appointment == 1">
							{{ iszq ? '自提 ' : '外卖 ' }}- 预
							<text class="m01">/</text>
						</text>
						<block v-if="!iszq">
							<text v-if="co.appointment != 1" class="wei mr10">立即送出</text>
							<text class="wei">{{ co.serviceAt }}</text>
							前送达
							<text class="wei " style="margin-left: 10rpx;">已超时xxx</text>
						</block>
						<block v-else>
							<text v-if="co.appointment != 1" class="wei mr10">自提</text>
							<text class="wei">预计到店时间：{{ co.serviceAt }}</text>
						</block>
					</view>
				</view>
				<view class="">
					<view class="f28 mb10">{{ getState() || '等待接单' }}</view>
				</view>
			</view>
			<view class="dbxx"></view>
			<view v-if="co.reminderAt" class="wr2 f-y-c p2">
				<text class="iconfont iconxl cdtb mr20"></text>
				<view class="f-g-1 time f25">催单时间：{{ timeToDate(co.reminderAt, 'hh:mm') }}</view>
			</view>
			<view class="wr3 p30">
				<view class="f-y-c">
					<view class="f-1 f-y-c">
						<view v-if="co.receivedName" class="f36 wei mr10">{{ co.receivedName }}</view>
						<view class="mt10 f28">
							手机尾号{{ co.receivedTel ? co.receivedTel.substr(co.receivedTel.length - 4) : '****' }}</view>
					</view>
					<view class="f-y-c">
						<mg-i @tab="util.makeTel(co.receivedTel)" inm="dh ml50" fs="58" ic="#57585A" />
						<mg-i inm="xx ml50" fs="46" ic="#57585A" />
					</view>
				</view>
				<view class="f24 c4 f-y-c">{{ co.receivedAddress || '' }}</view>
				<view v-if="!iszq" class="f24 c9 f-y-c">
					<view @click="ckwz(1)">点击查看配送地址</view>
					<view class="iconfont iconright f20 c3"></view>
				</view>
				<view v-else class="f24 c0 wei f-y-c">自提码：{{ co.selfCode }}</view>
				<view class="f-x-bt mt10">
					<view class="f-1 f-y-c">
						<text class="f-g-0 mdxk f18 br-h mr20">下单{{ co.payNum }}次</text>
					</view>
				</view>
			</view>
			<view class="dbxx"></view>
			<view class="p30">
				<view class="f-y-c">
					<view class="f-1 f36 wei">{{ co.goodsArr ? co.goodsArr.length : '--' }}种商品,共{{ co.num }}件</view>
					<view v-show="!showsp" class="">
						预计收入
						<text class="f28 wei ml10">{{ osl + co.storeActualMoney }}</text>
					</view>
				</view>
				<view class="wr5">
					<view class="cf70">备注：{{ co.userNote || '无' }}</view>
				</view>
			</view>
			<view v-show="!showsp" class="dbxx"></view>
			<view v-show="!showspd" class="dbxx"></view>
			<u-collapse>
				<u-collapse-item :open="showsp">
					<view class="wr4 pb30">
						<view class="zkc">
							<view class="zkbd">
								<view v-for="(v, i) in co.goodsArr" :key="i" class="p10">
									<view class="f-y-c">
										<view class="f-1 f-y-c">
											<text class="f-1 t-o-e mr10 wei">{{ v.name }}</text>
											<text class="f24" :class="{ crb: v.num > 1 }">x{{ v.num }}</text>
										</view>
										<view class="jgw w-b-ba t-r f24">
											<block v-if="ishyj(v)">
												<text class="t-d-l mr20 c9">{{ sl + v.money }}</text>
												<text>{{ sl + v.vipMoney }}</text>
											</block>
											<block v-else>
												<text>{{ sl + v.money }}</text>
											</block>
										</view>
									</view>
									<view class="f-raw f20 c9">
										<text class="" v-if="v.data">{{ v.data }}</text>
										<text v-if="v.attribute">({{ v.attribute }})</text>
										<text class="ml10" v-if="v.material">+{{ v.material }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="p10 f-y-c mb10">
							<view class="f-1 c9">小计</view>
							<view class="f24 c9">{{ osl + co.originMoney }}</view>
						</view>
						<view class="p10 f-y-c">
							<view class="f-1">包装费</view>
							<view class="f24">{{ osl + co.boxMoney }}</view>
						</view>
						<view class="mt20">
							<view class="p10 f-y-c">
								<view class="f-1">配送费</view>
								<view class="f24">{{ osl + co.deliveryMoney }}</view>
							</view>
							<view class="p10 f-y-c">
								<view @click.stop="$emit('hdzc', { t: 1, v: co, osl: osl })" class="f-1 f-y-c">
									<text>优惠合计</text>
									<text class="iconfont iconwen f26 ml10"></text>
								</view>
								<view class="f24">-{{ osl + co.discount }}</view>
							</view>
						</view>
						<view v-if="co.state != 1 && co.state != 7" class="mt20 p10 f-bt">
							<view class="f30"></view>
							<view class="t-r">
								<view class="f-y-c" @click.stop="$emit('hdzc', { t: 2, v: co, osl: osl })">
									预计收入
									<text class="iconfont iconwen f26 c6 ml10 mr10"></text>
									<text class="f46 crb wei">{{ osl }}{{ co.storeActualMoney }}</text>
								</view>
								<view class="c9 mt15">顾客实际支付{{ osl + co.money }}</view>
							</view>
						</view>
						<view v-else class="mt20 p10 f-bt">
							<view class="f30"></view>
							<view class="t-r">
								<view class="c9 mt15">顾客实际支付{{ osl + co.money }}</view>
							</view>
						</view>
					</view>
					<view class="dbxx"></view>
					<!-- 配送退款 -->
					<!-- <view v-if="co.state > 8 || (co.state == 4 && !iszq)" class="wr6">
						<view class="tk p20 hlb">
							<block v-if="co.state > 8">
								<view class="f-x-bt p10" @click.stop="showtk = !showtk">
									<view>退款</view>
									<view class="f-y-c f24">
										<text>{{ showtk ? '收起' : '展开' }}</text>
										<text class="iconfont icondown c0 f24 ml10 rowxx" :class="{ rowshow: showtk }"></text>
									</view>
								</view>
								<view class="zkc f26" :class="{ zkcshow: showtk }">
									<view class="zkbd" :class="{ zkbdshow: showtk }">
										<view v-if="co.state > 8" class="p10 f-row">
											<view class="iconfont iconyd f14 mr20 mt10"></view>
											<view class="f-1">
												<view class="f-1 mr10">顾客申请退款</view>
												<view class="f24 c9">顾客申请</view>
											</view>
											<view class="c9">{{ timeToDate(co.applyAt) }}</view>
										</view>
										<view v-if="co.state == 10" class="p10 f-row">
											<view class="iconfont iconyd f14 mr20 mt10"></view>
											<view class="f-1">
												<view class="f-1 mr10 cf70">商家已通过退款</view>
												<view class="f24 c9">退款申请已通过</view>
											</view>
											<view class="c9">{{ timeToDate(co.refundAt) }}</view>
										</view>
										<view v-if="co.state == 11" class="p10 f-row">
											<view class="iconfont iconyd f14 mr20 mt10"></view>
											<view class="f-1">
												<view class="f-1 mr10 crb">商家已通过退款</view>
												<view class="f24 c9">退款申请已通过</view>
											</view>
											<view class="c9">{{ timeToDate(co.refundAt) }}</view>
										</view>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="f-x-bt p10" @click.stop="psfs">
									<view>配送方式：{{ co.deliveryModeName }}</view>
									<view v-if="co.deliveryMode == 2" class="f24 cf70">联系买家</view>
									<view v-else class="f-y-c f24">
										<text>{{ showps ? '收起' : '展开' }}</text>
										<text class="iconfont icondown c0 f24 ml10 rowxx" :class="{ rowshow: showps }"></text>
									</view>
								</view>
								<view class="zkc f26" :class="{ zkcshow: showps }">
									<view class="zkbd" :class="{ zkbdshow: showps }">
										<view>配送状态：{{ psInfo.statusMsg || '' }}</view>
										<view class="f-x-bt">
											<view class="f-1 f-y-c">
												<text class="t-o-e f28">骑手姓名：{{ psInfo.riderName || '' }}</text>
											</view>
											<view class="ml20">
												<mg-i @tab="util.makeTel(psInfo.riderTel)" inm="dh ml50" />
												<mg-i @tab="ckwz(2)" inm="dt ml50" />
											</view>
										</view>
										<view class="cf70">{{ psInfo.riderTel || '' }}</view>
									</view>
								</view>
							</block>
						</view>
					</view> -->
					<view v-if="ptype == 1" class="wr7 p30">
						<view class="f-x-bt f24 c9">
							<view class="p10">
								<view>下单：{{ co.createdAt }}</view>
								<view @click.stop="util.fz(co.outTradeNo)" class="mt10">
									单号：{{ co.outTradeNo }}
									<text class="ml20 c0 wei">复制</text>
								</view>
							</view>
							<view v-if="co.state > 2" @click.stop="$emit('operation', { t: 'dyj', co })"
								class="f-c-c c6">
								<mg-i stop="2" inm="dyj f38 c6" />
								<text>打印</text>
							</view>
						</view>
					</view>
					<view @click.stop="$emit('operation', { t: 'dyj', co })" v-if="ptype == 2" class="dyjc f-c c9">
						<mg-i inm="dyj mr20"></mg-i>
						<text>打印</text>
					</view>
				</u-collapse-item>
			</u-collapse>
			<!-- 订单轨迹内容 -->
			<u-collapse>
				<u-collapse-item :open="showspd">

					<view :active="active">
						<block v-for="(item, index) in trackList" :key="index">
							<view style="display: flex;flex-direction: row;margin-bottom: 20rpx;">
								<!-- 左 -->
								<view style="width: 80rpx;display: flex;flex-direction: column;align-items: center;">
									<!-- 球 -->
									<view :style="{
									              width: '20rpx',
									              height: '20rpx',
									              borderRadius: '50%',
									              backgroundColor: index === active? '#FE9367' : '#ccc',
									              zIndex: 1
									            }"></view>
									<!-- 线 -->
									<view style="width: 2rpx;height: 100%;background-color: #eee;margin-top: -10rpx;"
										v-if="index!== trackList.length - 1"></view>
								</view>
								<!-- 右 -->
								<view style="flex: 1;">
									<view>
										<text style="margin-right: 20rpx;">{{ item.time }}</text>
									</view>
									<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
										<text>处理人：{{ item.img}}{{ item.contact }}</text>
										<text>电话：{{ item.phone }}</text>
									</view>
									<view style="margin-top: 10rpx;">

										<text class="desc">{{ item.desc }}</text>
									</view>
								</view>
							</view>
						</block>
					</view>
					<button type="primary" size="mini"
						style="margin: 30px 10px; width: 100px;color:#fff ;background:#fe9367 ;"
						@click="change">改变状态</button>
				</u-collapse-item>
			</u-collapse>
			<!-- 这里绑定展开完整信息、收起 -->
			<view class="f-x-e p30">
				<view class="f-y-c" @click.stop="showsp = !showsp" style="margin-right: 50rpx;">
					<text>{{ showsp ? '收起完整信息' : '展开完整信息' }}</text>
					<text class="iconfont icondown wei c0 f24 ml5 rowxx" :class="{ rowshow: showsp }"></text>
				</view>
				<!-- 这里绑定展开订单轨迹、收起 -->
				<view class="f-y-c" @click.stop="showspd = !showspd">
					<text>{{ showspd ? '收起订单轨迹' : '展开订单轨迹' }}</text>
					<text class="iconfont icondown wei c0 f24 ml5 rowxx" :class="{ rowshow: showspd }"></text>
				</view>
			</view>


			<view class="f-c wr7 f32">
				<view v-if="co.state == 2" class="btnc" @click.stop="$emit('operation', { t: 'jjjd', co })">
					<view class="btn f-c">拒单</view>
				</view>
				<view v-if="co.state == 2" class="btnc f-1" @click.stop="$emit('operation', { t: 'ljjd', co })">
					<view class="btn xz f-c" :style="{ background: tColor }">接单</view>
				</view>
				<view v-if="co.state > 2" class="btnc" @click.stop="$emit('operation', { t: 'dyj', co })">
					<view class="btn f-c">打印</view>
				</view>
				<view v-if="co.state == 4 && co.deliveryMode == 10" class="btnc"
					@click.stop="$emit('operation', { t: 'ddtzz', co })">
					<view class="btn f-c">自取提醒</view>
				</view>
				<view v-if="co.state == 4 && !iszq" class="btnc" @click.stop="$emit('operation', { t: 'qrhx', co })">
					<view class="btn xz f-c" :style="{ background: tColor }">确认收货</view>
				</view>
				<view v-if="co.state == 4 && iszq" class="btnc" @click.stop="$emit('operation', { t: 'qrsh', co })">
					<view class="btn xz f-c" :style="{ background: tColor }">确认收货</view>
				</view>
				<view v-if="showcd && co.reminderAt" class="btnc" @click.stop="$emit('operation', { t: 'qrcd', co })">
					<view class="btn xz f-c" :style="{ background: tColor }">确认</view>
				</view>
				<view v-if="co.state == 3 || co.state == 4" class="btnc"
					@click.stop="$emit('operation', { t: 'sdtk', co })">
					<view class="btn f-c">退款</view>
				</view>
				<view v-if="co.state == 9" class="btnc" @click.stop="$emit('operation', { t: 'jtk', co })">
					<view class="btn f-c" style="color: #f00;border-color: #f00;">拒绝退款</view>
				</view>
				<view v-if="co.state == 9" class="btnc" @click.stop="$emit('operation', { t: 'tytk', co })">
					<view class="btn xz f-c" :style="{ background: tColor }" style="color: white;">同意退款</view>
				</view>
				<view v-if="co.state == 3 && !iszq" class="btnc" @click.stop="$emit('operation', { t: 'ljps', co })">
					<view class="btn xz f-c" :style="{ background: tColor }">立即配送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {
		utilMixins,
		ddstates
	} from '@/common/util-mixins.js';
	import utils from '@/common/utils.js';
	import {
		ckwz
	} from '@/common/wechat-util.js';
	import bkB from '@/components/common/block-b.vue';
	import mgI from '@/components/common/mg-icon.vue';
	export default {
		name: 'wm-order',
		components: {
			mgI,
			bkB
		},
		props: {
			orderList: {
				type: Array,
				default: () => {
					return [];
				}
			},
			co: {
				type: Object,
				default: () => {
					return {};
				}
			},
			ptype: {
				type: String,
				default: '1'
			},
			showcd: {
				type: Boolean,
				default: false
			},
			sp: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				stime: '',
				showsp: false,
				showspd: false,
				showtk: true,
				showps: false,
				psInfo: {},
				active: 0,
				trackList: [{
					img: '1',
					contact: '糊里糊涂',
					time: '今天14：54：39',
					desc: '用户下单',
					phone: '123456'

				}, {
					img: '1',
					contact: '糊里糊涂',
					time: '今天14：54：40',
					desc: '骑手取餐',
					phone: '123456'
				}, {
					img: '1',
					contact: '糊里糊涂',
					time: '今天14：54：41',
					desc: '配送中',
					phone: '123456'
				}, {
					img: '1',
					contact: '糊里糊涂',
					time: '今天14：54：42',
					desc: '已送达',
					phone: '123456'
				}]
			};
		},
		mixins: [utilMixins, ddstates],
		computed: {
			...mapState({
				orderset: state => state.config.orderset
			}),
			iszq() {
				return this.co.deliveryMode == 10;
			},
			osl() {
				return this.co.symbol || this.sl;
			}
			// hyzk() {
			// 	return (+this.hdzc - this.co.preferentialMoney - this.co.newMoney - this.co.couponPreferential - this.co.deliveryPreferential)
			// 		.toFixed(2)
			// },
		},
		methods: {
			ckwz(t = 1) {
				if (t == 1) {
					let co = this.co;
					ckwz({
						name: co.receivedName,
						address: co.receivedAddress,
						lat: co.lat,
						lng: co.lng
					});
				} else {
					let co = this.psInfo;
					ckwz({
						name: co.riderName,
						address: co.statusMsg,
						lat: co.riderLat,
						lng: co.riderLng
					});
				}
			},
			async dyj() {
				try {
					await this.util.modal(`确认打印此订单吗？`);
				} catch (e) {}
			},
			ishyj(v) {
				return v.vipMoney > 0 && +v.vipMoney < +v.money;
			},
			// 1
			itemTotal(v) {
				let fhyj = +v.money,
					hyj = +v.vipMoney;
				if (v.material && v.material.length) {
					v.material.forEach(v => {
						fhyj += v.number * v.outPrice;
						hyj += v.number * v.outPrice;
					});
				}
				return {
					fhyj: +(fhyj * v.num).toFixed(2),
					hyj: +(hyj * v.num).toFixed(2)
				};
			},
			getState() {
				if (this.co.deliveryMode != 10) {
					return this.stateArr[+this.co.state];
				} else {
					return this.ztstateArr[+this.co.state];
				}
			},
			stateColor() {
				let color = '';
				switch (+this.co.state) {
					case 1:
						color = this.tColor;
						break;
					case 7:
						color = '';
						break;
					case 8:
					case 11:
						color = '#f00';
						break;
					default:
						color = '#333';
				}
				return color;
			},
			async psfs() {
				if (this.co.deliveryMode == 2) {
					this.util.makeTel(this.co.receivedTel);
				} else {
					if (this.psInfo.riderName) {
						this.showps = !this.showps;
					} else {
						let res = await this.util.request({
							url: this.api.OtherInfo,
							data: {
								id: this.co.id
							}
						});
						if (res) {
							this.psInfo = res.data;
							this.showps = !this.showps;
						} else {
							this.showps = !this.showps;
						}
					}
				}
			},
			change() {
				if (this.active < this.trackList.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
				console.log('当前 active 值:', this.active);
			}
		}
	};
</script>

<style scoped lang="scss">
	.dbxx {
		// border-bottom: 1px dotted #C6C6C6;
		// background: url("@/static/img/1.png") repeat-x;
		height: 2px;
		width: 100%;
		height: 1px;
		background-image: linear-gradient(to right, #c6c6c6 0%, #c6c6c6 50%, transparent 50%);
		background-size: 8px 1px;
		background-repeat: repeat-x;
	}

	.wrc {
		border-radius: 10rpx;
		padding: 0 35rpx;
		box-shadow: 0 0 10rpx 0rpx rgba(0, 0, 0, 0.1);
	}

	.wr1 {
		.ydc {
			padding: 2rpx 8rpx;
			background: #f87c00;
		}
	}

	.wr2 {
		background: #fff4f5;

		.cdtb {
			color: #ff4048;
		}

		.time {
			color: #e65a5e;
		}
	}

	.wr3 {
		.mdxk {
			color: #848893;
			padding: 3rpx 6rpx;
			border-radius: 5rpx;
		}
	}

	.wr4 {
		.jgw {
			width: 180rpx;
		}
	}

	.wr5 {}

	.wr6 {
		.iconyd {
			color: #fdd456;
		}
	}

	.wr7 {
		.btnc {
			margin: 20rpx 0;
			width: 33.33%;
			// padding: 0 15rpx;
			height: 88rpx;
			width: 33.33%;
			font-size: 28rpx;

			&:not(:last-child) {
				margin-right: 30rpx;
			}
		}

		.btn {
			height: 100%;
			border: 0.5px solid #9a9b9e;
			border-radius: 10rpx;
		}

		.xz {
			border: none;
			font-weight: bold;
		}
	}

	.dyjc {
		background: #fbfafa;
		height: 72rpx;
	}
</style>